<template>
  <div id="itemMain" ref="itemRef"></div>
</template>

<script>
import * as echarts from 'echarts';
import api from '../utils/api';
export default {
  data() {
    return {
      myChart: null,
      option: {},
      timeOut: null,
    };
  },
  async mounted() {
    let nameList = [];
    let dataList = [];
    let dataList1 = [];
    await api.getYSYXYJByPFMarket().then((res) => {
      res.data.forEach((item) => {
        nameList.push(item.name);
        dataList.push(item.jcsum);
        dataList1.push(item.bhgsum);
      });
    });
    let chartDom = this.$refs.itemRef;
    this.myChart = echarts.init(chartDom, null, {
      devicePixelRatio: 2.5,
    });
    this.option = {
      title: {
        text: '疑似阳性样品数',
        textStyle: {
          color: '#fff',
          fontSize: 14,
        },
      },
      legend: {
        top: 2,
        left: '50%',
        textStyle: {
          color: 'rgba(255,255,255,1)',
          fontSize: '12',
        },
        icon: 'stack',
        itemWidth: 10,
        itemHeight: 10,
      },
      grid: {
        bottom: 50,
        left: '12%',
      },
      dataset: {
        dimensions: ['product', '阳性数', '处理数'],
      },
      dataZoom: [
        //滑动条
        {
          xAxisIndex: 0, //这里是从X轴的0刻度开始
          show: false, //是否显示滑动条，不影响使用
          type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
          startValue: 0, // 从头开始。
          endValue: 5, // 一次性展示6个。
        },
      ],
      xAxis: {
        type: 'category',
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: '12',
            color: 'rgba(255,255,255,1)',
          },
        },
        axisLabel: {
          interval: 0,
          rotate: 40,
          textStyle: {
            fontSize: '12',
            color: 'rgba(255,255,255,1)',
          },
        },
        data: nameList,
      },
      yAxis: [
        {
          minInterval: 1,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: '14',
              color: 'rgba(255,255,255,1)',
            },
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.1)',
            },
          },
        },
      ],
      series: [
        {
          name: '阳性数',
          type: 'bar',
          barWidth: 6,
          itemStyle: {
            color: '#FF9E55',
            barBorderRadius: [12, 12, 0, 0],
          },
          data: dataList,
        },
        {
          name: '处理数',
          type: 'bar',
          barWidth: 6,
          itemStyle: {
            color: '#3CFDC2',
            barBorderRadius: [12, 12, 0, 0],
          },
          data: dataList1,
        },
      ],
    };
    this.myChart.setOption(this.option);
    this.timeOut = setInterval(() => {
      if (this.option.dataZoom[0].endValue == dataList.length) {
        this.option.dataZoom[0].endValue = 5;
        this.option.dataZoom[0].startValue = 0;
      } else {
        this.option.dataZoom[0].endValue = this.option.dataZoom[0].endValue + 1;
        this.option.dataZoom[0].startValue = this.option.dataZoom[0].startValue + 1;
      }
      this.myChart.setOption(this.option);
    }, 2000);
    window.addEventListener('resize', () => {
      this.myChart.resize();
    });
  },
};
</script>

<style lang="less" scoped>
#itemMain {
  width: 100%;
  height: 100%;
}
</style>
